<template>
    <view class="page">
        <view class="input">
            <input v-model="nickname" type="text" placeholder="" />
            <image src="/static/clear.png" mode="" @tap="nickname = ''" />
        </view>
        <view class="tip font-24">{{ $t('namePage.inputTips') }}</view>
        <view class="save font-32" :class="[$i18n.locale]" @tap="save">{{ $t('saveTips') }}</view>
    </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            nickname: ''
        }
    },
    computed: {
        ...mapState(['user'])
    },
    onLoad() {
        uni.setNavigationBarTitle({
            title: this.$t('namePage.navigationBarTitle')
        })
    },
    watch: {
        user: {
            handler(val) {
                this.nickname = val.nickname
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        save() {
            this.$http('post|api/User/userinfo', {
                nickname: this.nickname
            }).then(res => {
                this.$store.dispatch('set_user', Object.assign(this.user, { nickname: this.nickname }))
                this.$toastApp(res.msg)
                setTimeout(() => {
                    uni.navigateBack()
                }, 1000)
            })
        }
    }
}
</script>

<style lang="scss">
.page {
    min-height: calc(100vh - 88rpx);
    background-color: #f7f7f7;
    .input {
        position: relative;
    }
    input {
        height: 100rpx;
        background-color: #ffffff;
        padding: 0 30rpx;
        box-sizing: border-box;
        font-size: 30rpx;
    }
    image {
        position: absolute;
        right: 30rpx;
        top: 50%;
        margin-top: -14rpx;
        height: 28rpx;
        width: 28rpx;
    }
    .tip {
        padding-left: 30rpx;
        box-sizing: border-box;
        color: #b3b3b3;
        margin-top: 20rpx;
    }
    .save {
        width: 690rpx;
        height: 90rpx;

        border-radius: 45rpx;
        line-height: 90rpx;
        text-align: center;
        margin: 0 auto;
        margin-top: 60rpx;
        color: #ffffff;
        &.zh {
            background: var(--theme);
        }
        &.hk {
            background: var(--themeHK);
        }
    }
}
</style>
